<template>
  <div class="buildType">
    <span class="buildType-title">
      建筑类型
      <img src="/static/img/large.png" title="全屏展示" class="full-btn" />
    </span>
    <div id="buildType-contents"></div>
  </div>
</template>
<script>
import { elecSandTableApi } from "@/services/WorkCenter";
export default {
  data() {
    return {
      echartStyle: {},
      xAxis: [],
      yAxis: []
    };
  },
  methods: {
    //获取图表数据
    getEchartData() {
      elecSandTableApi
        .getBuildTypeData({
          params: {
            field: "cp_type"
          }
        })
        .then(res => {
          console.log("++++", res);
          res.data.filter(item => {
            this.yAxis.push(item.name);
            this.xAxis.push(item.total);
          });
          this.initCharts();
        })
        .catch(error => {
          console.log(error);
        });
    },
    //初始化图表
    initCharts() {
      let Chart = this.$echarts.init(
        document.getElementById("buildType-contents")
      );
      // 绘制图表
      Chart.resize();
      this.echartStyle = {
        grid: {
          left: "3%",
          right: "4%",
          bottom: "0",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            data: this.xAxis,
            axisLabel: {
              interval: 0,
              show: true,
              textStyle: {
                color: "white",
                fontSize: this.fontSize
              }
            }
          }
        ],
        yAxis: [
          {
            splitLine: {
              show: true,
              //  改变轴线颜色
              lineStyle: {
                // 使用深浅的间隔色
                color: ["#1e495c"]
              }
            },
            type: "category",
            axisLabel: {
              // formatter: '{value}',
              textStyle: {
                color: "#fff",
                fontSize: this.fontSize
              }
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            }
          }
        ],

        series: [
          {
            name: "",
            type: "bar",
            data: this.yAxis,
            barMaxWidth: 40,
            itemStyle: {
              //柱形图圆角，鼠标移上去效果，如果只是一个数字则说明四个参数全部设置为那么多
              emphasis: {
                barBorderRadius: 30
              },
              normal: {
                color: "#1ba7ff", //圈圈的颜色
                //柱形图圆角，初始化效果
                barBorderRadius: [5, 5, 0, 0]
              }
            }
          }
        ]
      };
      Chart.setOption(this.echartStyle);
      window.addEventListener("resize", function() {
        Chart.resize();
      });
    }
  },
  mounted() {
    this.getEchartData();
  }
};
</script>
<style lang="scss" scoped>
.buildType {
  .buildType-title {
    color: white;
    font-size: 16px;
    padding-left: 3%;
    display: block;
    margin: 1vh 2% 0 2%;
    background: #2b66b7;
    opacity: 30%;
    position: relative;
    .full-btn {
      position: absolute;
      right: 5px;
      top: 3px;
      cursor: pointer;
    }
  }
  #buildType-contents {
    width: 100%;
    height: 88%;
    padding: 0 5px;
  }
}
</style>